<template>
  <div class="detail-report">
    <div class="report-logo">创作者周报</div>
    <div class="detail-report-time">
      {{ workReport.startTime | formatDate }}-{{
        workReport.endTime | formatDate
      }}
    </div>
    <div class="grade">
      <h4>上周创作排名</h4>
      <div class="grade-box">
        <ul>
          <li>
            <div class="grade-left">
              <img src="../../assets/images/dianzan.png" />
            </div>
            <div class="grade-right">
              上周你的创作表现超过了<span>{{ workReport.worksNumExceed }}%</span
              >的同级创作者
            </div>
          </li>
          <li>
            <div class="grade-left">
              <img src="../../assets/images/paishe.png" />
            </div>
            <div class="grade-right">
              上周你的视频播放超过了<span>{{ workReport.playExceed }}%</span
              >的同级创作者
            </div>
          </li>
        </ul>
      </div>
    </div>
    <div class="key-data">
      <h4>上周关键数据</h4>
      <div class="detail-data">
        <ul>
          <li>
            <p>发表作品量</p>
            <h2>{{ workReport.worksNum }}</h2>
          </li>
          <li>
            <p>新增播放量量</p>
            <h2>{{ workReport.incrPlayNum }}</h2>
          </li>
          <li>
            <p>新增点赞量</p>
            <h2>{{ workReport.incrWorksLikeNum }}</h2>
          </li>
          <li>
            <p>新增粉丝量</p>
            <h2>{{ workReport.incrFansNum }}</h2>
          </li>
          <li>
            <p>新增收藏量</p>
            <h2>{{ workReport.incrCollectNum }}</h2>
          </li>
        </ul>
      </div>
    </div>
    <div class="best">
      <div class="best-left">
        <h4>上周表现最佳视频</h4>
        <div class="best-box">
          <div class="best-work">
            <img :src="workReport.weekReportWorks.coverPath" />
          </div>
          <div class="best-title">
            <p>
              {{ workReport.weekReportWorks.worksDesc
              }}<template v-for="topic in workReport.weekReportWorks.topicList">
                #{{ topic.topicTitle }}</template
              >
            </p>
            <div>
              点赞<span>{{ workReport.weekReportWorks.likeCounts }}</span
              >收藏<span>{{ workReport.weekReportWorks.collectCounts }}</span
              >评论<span>{{ workReport.weekReportWorks.commentCounts }}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="best-right">
        <h4>至今表现最佳视频</h4>
        <div class="best-box">
          <div class="best-work">
            <img :src="workReport.allReportWorks.coverPath" />
          </div>
          <div class="best-title">
            <p>
              {{ workReport.allReportWorks.worksDesc
              }}<template v-for="topic in workReport.allReportWorks.topicList">
                #{{ topic.topicTitle }}</template
              >
            </p>
            <div>
              点赞<span>{{ workReport.allReportWorks.likeCounts }}</span
              >收藏<span>{{ workReport.allReportWorks.collectCounts }}</span
              >评论<span>{{ workReport.allReportWorks.commentCounts }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { formatDate } from "@/utils/date";
import { getWorkReportApi } from "@/api/serveHome";
export default {
  data() {
    return {
      workReport: {},
    };
  },
  filters: {
    formatDate(time) {
      if (time == null || time === "") {
        return "N/A";
      }
      let date = new Date(time);
      return formatDate(date, "yyyy-MM-dd");
      //  "yyyy-MM-dd hh:mm:ss"
    },
  },
  created() {
    this.getWorkReportFun();
  },
  methods: {
    getWorkReportFun() {
      getWorkReportApi().then((res) => {
        console.log(res);
        if (res.data.code == 200) {
          this.workReport = res.data.data;
        }
      });
    },
  },
};
</script>

<style>
* {
  padding: 0;
  margin: 0;
}
.detail-report {
  width: 100%;
  background: #fff;
  margin: auto;
  box-sizing: border-box;
  padding: 0 30px 30px 30px;
}
.report-logo {
  font-family: cursive;
  font-weight: 600;
  background: #000;
  color: #fff;
  border-radius: 0 0 8px 8px;
  padding: 5px 8px;
  width: 80px;
}
.detail-report-time {
  height: 60px;
  border-bottom: 1px dashed #d1d1d1;
  color: #b8b7b7;
  font-size: 13px;
  line-height: 60px;
}
.grade h4,
.key-data h4 {
  margin: 25px 0 20px 0;
}
.grade-right {
  line-height: 100px;
  margin-left: 20px;
}
.grade-right span {
  font-size: 24px;
  margin: 0 5px;
  color: red;
}
.grade-box ul {
  display: flex;
  justify-content: space-between;
}
.detail-data ul {
  display: flex;
  flex-wrap: wrap;
}
.detail-data ul li {
  width: 30%;
  /* margin-right: 40px; */
  margin: 7px 21px;
  padding: 17px;
  line-height: 1.8;
  height: 100px;
  border-radius: 8px;
  background: #fafafb;
  box-sizing: border-box;
}
.grade-box ul li {
  width: 48%;
  display: flex;
  border-radius: 8px;
  background: #e7e7e7;
}
.grade-left img {
  width: 100px;
  height: 100px;
  border-radius: 8px;
}
.best {
  width: 100%;
  display: flex;
  margin-top: 25px;
  padding-bottom: 30px;
  box-sizing: border-box;
  border-bottom: 1px dashed #d1d1d1;
  justify-content: space-between;
}
.best-left,
.best-right {
  width: 49%;
}
.best-work > img {
  width: 115px;
  height: 160px;
  border-radius: 8px;
}
.best-box {
  height: 200px;
  display: flex;
  border-radius: 8px;
  padding: 20px;
  margin-top: 20px;
  box-sizing: border-box;
  background: #fafafb;
}
.best-title {
  margin-left: 15px;
}
.best-title p {
  margin-top: 40px;
  color: #acaaaa;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
.best-title > div {
  display: flex;
  font-size: 13px;
  margin-top: 50px;
}
.best-title > div span {
  margin: 0 10px 0 3px;
}
</style>
